<template>
  <div class="news">
    <!-- 新闻个数应该动态渲染 -->
    <!-- 测试用的button -->
    <!-- <el-button slot="append" icon="el-icon-search" @click="getMicroNew"></el-button> -->
    <!-- <el-timeline>
      <el-timeline-item v-for="(item, index) in hNewList" :key="index"
        :timestamp="item.newsTime" placement="top" size="normal">
        
        {{item.title}}
      </el-timeline-item>
    </el-timeline> -->
    <!-- Tabs栏切换时通过activeName执行后续操作 -->
    <el-tabs  v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="首页" name="index">
        <div v-for="(item, index) in hIndexNewList" :key="index" class="new-contain clearfix">
          <a :href="item.url" class="new_pic">
            <img :src="item.thumbnail" alt="item.title" class="new_img"/>
          </a>
          <div class="new_detail">
            <p class="new_title"><a :href="item.url" :title="item.title">{{item.title}}</a></p>
            <p class="new_time"><span>{{item.source}} {{item.newsTime}}</span></p>
          </div>
        </div>
        <!-- 未解决BUG！！！这两种父组件引用子组件的方法都有bug，如果使用vuex应该可行，待验！ -->
        <!-- 第一种方法渲染不成功，猜测可能是因为子组件的div没有高度 -->
        <!-- <HNewCommon/> -->
        <!-- 第二众方法，只有引用子组件的最后一个tab项能渲染成功，而且会闪现1m前一个tab项本该显示的数据，然后再回到自身，但图片加载不出 -->
        <HNewCommon ref="hNewCommon"></HNewCommon>
      </el-tab-pane>
      <el-tab-pane label="宏观" name="micro">
        <div v-for="(item, index) in hMicroNewList" :key="index" class="new-contain clearfix">
          <a :href="item.url" class="new_pic">
            <img :src="item.thumbnails.image.value[0].url" alt="item.title" class="new_img"/>
          </a>
          <div class="new_detail">
            <p class="new_title"><a :href="item.url" :title="item.title">{{item.title}}</a></p>
            <p class="new_time"><span>{{item.source}} {{item.newsTime}}</span></p>
          </div>
        </div>
        <!-- <HNewCommon ref="hNewCommon"></HNewCommon> -->
      </el-tab-pane>
      <el-tab-pane label="股票" name="stock">
        <div v-for="(item, index) in hMicroNewList" :key="index" class="new-contain clearfix">
          <a :href="item.url" class="new_pic">
            <img :src="item.thumbnails.image.value[0].url" alt="item.title" class="new_img"/>
          </a>
          <div class="new_detail">
            <p class="new_title"><a :href="item.url" :title="item.title">{{item.title}}</a></p>
            <p class="new_time"><span>{{item.source}} {{item.newsTime}}</span></p>
          </div>
          <!-- 评论数 -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="公司" name="company clearfix">
        <div v-for="(item, index) in hMicroNewList" :key="index" class="new-contain">
          <a :href="item.url" class="new_pic">
            <img :src="item.thumbnails.image.value[0].url" alt="item.title" class="new_img"/>
          </a>
          <div class="new_detail">
            <p class="new_title"><a :href="item.url" :title="item.title">{{item.title}}</a></p>
            <p class="new_time"><span>{{item.source}} {{item.newsTime}}</span></p>
          </div>
          <!-- 评论数 -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="商业" name="business clearfix">
        <div v-for="(item, index) in hMicroNewList" :key="index" class="new-contain">
          <a :href="item.url" class="new_pic">
            <img :src="item.thumbnails.image.value[0].url" alt="item.title" class="new_img"/>
          </a>
          <div class="new_detail">
            <p class="new_title"><a :href="item.url" :title="item.title">{{item.title}}</a></p>
            <p class="new_time"><span>{{item.source}} {{item.newsTime}}</span></p>
          </div>
          <!-- 评论数 -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="IPO" name="ipo">
        <div v-for="(item, index) in hMicroNewList" :key="index" class="new-contain clearfix">
          <a :href="item.url" class="new_pic">
            <img :src="item.thumbnails.image.value[0].url" alt="item.title" class="new_img"/>
          </a>
          <div class="new_detail">
            <p class="new_title"><a :href="item.url" :title="item.title">{{item.title}}</a></p>
            <p class="new_time"><span>{{item.source}} {{item.newsTime}}</span></p>
          </div>
          <!-- 评论数 -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="国际" name="international">
        <div v-for="(item, index) in hMicroNewList" :key="index" class="new-contain clearfix">
          <a :href="item.url" class="new_pic">
            <img :src="item.thumbnails.image.value[0].url" alt="item.title" class="new_img"/>
          </a>
          <div class="new_detail">
            <p class="new_title"><a :href="item.url" :title="item.title">{{item.title}}</a></p>
            <p class="new_time"><span>{{item.source}} {{item.newsTime}}</span></p>
          </div>
          <!-- 评论数 -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="港股" name="HongKong">
        <div v-for="(item, index) in hMicroNewList" :key="index" class="new-contain clearfix">
          <a :href="item.url" class="new_pic">
            <img :src="item.thumbnails.image.value[0].url" alt="item.title" class="new_img"/>
          </a>
          <div class="new_detail">
            <p class="new_title"><a :href="item.url" :title="item.title">{{item.title}}</a></p>
            <p class="new_time"><span>{{item.source}} {{item.newsTime}}</span></p>
          </div>
          <!-- 评论数 -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="wemoney" name="wemoney">
        <div v-for="(item, index) in hMicroNewList" :key="index" class="new-contain clearfix">
          <a :href="item.url" class="new_pic">
            <img :src="item.thumbnails.image.value[0].url" alt="item.title" class="new_img"/>
          </a>
          <div class="new_detail">
            <p class="new_title"><a :href="item.url" :title="item.title">{{item.title}}</a></p>
            <p class="new_time"><span>{{item.source}} {{item.newsTime}}</span></p>
          </div>
          <!-- 评论数 -->
        </div>
      </el-tab-pane>
    </el-tabs>
    
    <!-- <div>
      <a href="#" class="new_pic">
        <img src="../../../assets/heima.png" alt="新闻一标题" />
      </a>
      <div class="new_detail">
        <div class="new_title">新闻一标题新闻一标题新闻一标题</div>
        <div class="new_tag">新闻一标签新闻一标签</div>
        <div class="share-join">
          <span href="#share" title="分享" class="share-menu icons"></span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import jsonp from "jsonp";
import HNewCommon from './HNewCommon.vue';
export default {
  data() {
    return {
      // param:'getNewInfoIndexList',
      /* getNewInfoIndexList:function(data){
        
        console.log(data); 
      } */
      hIndexNewList: [],
      hMicroNewList:[],
      // type:20038,
      type:'20038',
      activeName: 'index'
      // currentName:'second'
    };
  },
  methods: {
    handleClick() {
      console.log(this.activeName);
      if(this.activeName=="index"){
        // 首页新闻资讯
        this.getIndexNew()
      }else if(this.activeName=="micro"){
        // 后面只需要根据请求地址中的代码（类型）判断获取哪个tab栏的数据
        this.type='20038';
        console.log(this.type);
        this.getMicroNew()
      }else if(this.activeName=="stock"){
        this.type='20032';
        // 1-62-83-
        console.log(this.type);
        this.getMicroNew()
      }else if(this.activeName=="company"){
        this.type='1-62-83-';
        console.log(this.type);
        this.getMicroNew()
      }else if(this.activeName=="business"){
        this.type='75003';
        console.log(this.type);
        this.getMicroNew()
      }else if(this.activeName=="ipo"){
        this.type='75004';
        console.log(this.type);
        this.getMicroNew()
      }else if(this.activeName=="international"){
        this.type='75005';
        console.log(this.type);
        this.getMicroNew()
      }else if(this.activeName=="HongKong"){
        this.type='60128';
        console.log(this.type);
        this.getMicroNew()
      }else if(this.activeName=="wemoney"){
        this.type='20039';
        console.log(this.type);
        this.getMicroNew()
      }
    },
    getIndexNew() {
    // sockjs.js?9be2:1606 GET http://192.168.1.101:8080/sockjs-node/info?t=1583642185049 net::ERR_CONNECTION_TIMED_OUT错误连接方式解决方法
      var _indexNew = this; 
      var param = {
        param: "getNewInfoIndexList"
      };
      // ERROR data中定义同ERROR
      /* var getNewInfoIndexList = function(data){
        console.log(data);
      } */
      window.getNewInfoIndexList = function(res) {
        console.log(res);
        var indexNews = res.data;
        console.log(indexNews);
        _indexNew.hIndexNewList=res.data;
        console.log(_indexNew.hIndexNewList);
        
        /* console.log(_indexNew.$refs.hNewCommon.hNewData);
        _indexNew.$refs.hNewCommon.hNewData = _indexNew.hIndexNewList
        console.log(_indexNew.$refs.hNewCommon.hNewData); */

      };
      // http://shankapi.ifeng.com/spring/finance/index/newInfoIndex/75219/getNewInfoIndexList
      jsonp("http://shankapi.ifeng.com/spring/finance/index/newInfoIndex/75219/getNewInfoIndexList?callback=getNewInfoIndexList",param,(err,data)=>{
        // 虽然可以拿到数据，但是会因超时不走success而走err
        if(err){
          // timeout
          console.log('err');
          // console.error(err.message);
          console.log(err);
        }else{
          console.log('success');
          /* _indexNew.hNewList = getNewInfoIndexList(data);
          console.log('success');
          console.log(_indexNew.hNewList); */
        }
      });
      // 因为有延时，所以undefined
      // console.log('over');
    },
    getMicroNew() {
      // 将指向vue的this保存到自身，以后续调用vue的数据和方法
      var _microNew = this;
      // 请求参数：回调函数
      var param = { param: "getInfoDataList" };
      // 回调函数必须在window全局定义，使用var或let无效
      window.getInfoDataList = function(res) {
        console.log(res);
        var microNews = res.data;
        console.log(microNews);
        _microNew.hMicroNewList=res.data;
        console.log(_microNew.hMicroNewList);
        /* console.log(_microNew.$refs.hNewCommon.hNewData);
        _microNew.$refs.hNewCommon.hNewData = _microNew.hMicroNewList
        console.log(_microNew.$refs.hNewCommon.hNewData); */
      };
      jsonp(
        "http://shankapi.ifeng.com/spring/finance/index/infoData/"+_microNew.type+"/getInfoDataList?callback=getInfoDataList",param,
        (err, res) => {
          if (err) {
            console.log('err');
            console.log(err);
          }else{
          console.log('success');
          }
        }
      );
    },
    getWYNew() {
      var param = { param: "data_callback" };
      // ERROR data中定义同ERROR
      /* var getNewInfoIndexList = function(data){
        console.log(data);
      } */
      window.data_callback = function(data) {
        console.log(data);
        var indexNews = res.data;
        console.log(indexNews);
        _indexNew.hIndexNewList=res.data;
        console.log(_indexNew.hIndexNewList);
      };
      // http://shankapi.ifeng.com/spring/finance/index/newInfoIndex/75219/getNewInfoIndexList
      jsonp(
        "https://money.163.com/special/00259BVP/news_flow_index.js?callback=data_callback",
        this.param,
        (err, res) => {
          if (!err) {
            // console.log(res);
            console.log('success');
          }else{
            console.log('err');
           console.log(err);
            
          }
        }
      );
      /*  this.$http.get('https://money.163.com/special/00259BVP/news_flow_index.js').then(res=>{
        console.log(res);
        
      }) */
    }
  },
  mounted:function () {
    //将callBackMoon方法绑定到window对象
    /* window['getNewInfoIndexList'] = (data) => {
      this.getNewInfoIndexList(data)
    } */
    this.getIndexNew();
  },
  components:{
    HNewCommon
  }
};
</script>

<style>
.news {
  margin: 0 20px;
}
.new div {
  margin-bottom: 10px;
}
.new-contain {
  position: relative;
  padding-top: 13px;
  padding-bottom: 20px;
  margin-top: 7px;
  height:90px;
  border-bottom: solid 1px #ededed;
}
.new_pic,.new_img {
  float:left;
  display: block;
  width:130px;
  height:90px;
}
/* .hIndexImg{
  float:left;
  width:130px;
  height:90px;
} */
.new_detail {
  float: right;
  width:450px ;
  padding: 0 10px;
}
p {
  display: block;
  /* width:470px ; */
  margin: 0;
  padding: 0;
  
}
.new_title {
  height:65px;
  overflow: hidden;
}
.new_title a{
  color: #222222;
  font-size: 18px;
  font-weight: bold;
  /* line-height: 26px;
  height: 26px;
  overflow: hidden; */
}
.new_time {
  color: #999999;
  font-size: 14px;
  margin-top:5px;
}
.new_time span{
  font-size: 12px;
}
</style>
